<template>

  <div class="clerk-order">
    <van-tabs v-model="active">
      <van-tab title="全部" class="order-status">
        <van-list class="order-list"
                  v-model="loading"
                  :finished="finished"
                  all-text="没有更多了"
                  @load="onLoad"

        >
          <!--                <div v-for="item in allList" :key="item" :title="item">-->
          <div class="list-wrapper-box" v-for="(item ,index) in allList" :key="item.id">
            <div  v-if="allList==''" class="list-empty">
                <van-empty
                  class="custom-image"
                  :image="this.emptyImg"
                  description="没有查询到订单"
                />
            </div>
            <div class="list-wrapper" v-else>


              <div class="list-left">
                <img src="@/assets/img/head.jpg" alt="" class="serve-headImg">
                <van-tag round type="primary" class="server-level">LV1</van-tag>
              </div>
              <div class="list-right">
                <div class="list-right-top">
                  <div class="list-right-top-left">
                    <div class="list-nickname">{{item.nickname}}</div>
                    <div class="list-grade-wrapper">
                      <van-tag v-if="item.grade=='特级'" type="primary" class="list-grade icon iconfont icon-dengji-A">&nbsp;{{item.grade}}</van-tag>
                      <van-tag v-else-if="item.grade=='高级'" type="primary" class="list-grade icon iconfont icon-dengji-B">&nbsp;{{item.grade}}</van-tag>
                      <van-tag v-else type="primary" class="list-grade icon iconfont icon-dengji-C">&nbsp;{{item.grade}}</van-tag>
                    </div>
                    <div class="list-sex-wrapper">
                      <van-tag type="primary" class="icon icon-sex-1 iconfont list-sex">{{item.age}}</van-tag>
                    </div>
                  </div>
                  <div class="list-right-top-right">
                    {{item.status}}
                  </div>
                </div>
                <div class="list-right-bottom">
                  <div class="list-right-bottom-left">
                    <div class="list-info">类型：{{item.serverType}}</div>
                    <div class="list-info" v-if="item.status=='待服务'">等待时间：{{item.time}}</div>
                    <div class="list-info" v-else-if="item.status=='服务中'">剩余时间：{{item.time}}</div>
                    <div class="list-info" v-else-if="item.status=='已完成'">完成时间：{{item.time}}</div>
                    <div class="list-info" v-else>取消时间：{{item.time}}</div>
                    <div class="list-info">消费：奇妙币 x {{item.fee}}</div>
                  </div>
                  <div class="list-right-bottom-right">
                    <!--                  <van-button type="default" class="order-cancel">取消订单</van-button>-->
                  </div>
                </div>
              </div>


            </div>

          </div>


        </van-list>

      </van-tab>
      <van-tab title="待服务" class="order-status">
        <van-list
          v-model="loading"
          :finished="finished"
          wait-text="没有更多了"
          @load="onLoad"
        >
          <van-cell v-for="item in waitList" :key="item" :title="item" />

          <div v-if="this.waitList==''" class="list-empty">
            <van-empty
              class="custom-image"
              :image="this.emptyImg"
              description="没有查询到订单"
            />
          </div>
        </van-list>
      </van-tab>
      <van-tab title="服务中" class="order-status">
        <van-list
          v-model="loading"
          :finished="finished"
          going-text="没有更多了"
          @load="onLoad"
        >
          <van-cell v-for="item in goingList" :key="item" :title="item" />
          <div v-if="this.goingList==''" class="list-empty">
            <van-empty
              class="custom-image"
              :image="this.emptyImg"
              description="没有查询到订单"
            />
          </div>
        </van-list>
      </van-tab>
      <van-tab title="已服务" class="order-status">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell v-for="item in finishedList" :key="item" :title="item" />
          <div v-if="this.finishedList==''" class="list-empty">
            <van-empty
              class="custom-image"
              :image="this.emptyImg"
              description="没有查询到订单"
            />
          </div>
        </van-list>
      </van-tab>
      <van-tab title="已取消" class="order-status">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell v-for="item in canceldList" :key="item" :title="item" />
          <div v-if="this.canceldList==''" class="list-empty">
            <van-empty
              class="custom-image"
              :image="this.emptyImg"
              description="没有查询到订单"
            />
          </div>
        </van-list>
      </van-tab>

    </van-tabs>

    <clerk-footer></clerk-footer>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Toast, Tab, Tabs ,List, Button, Empty } from 'vant';
  import ClerkFooter from '@/components/ClerkFooter'
  import emptyImg from '@/assets/img/empty.png'

  Vue.use(Empty);
  Vue.use(List);
  Vue.use(Toast);
  Vue.use(Tab);
  Vue.use(Tabs);
  Vue.use(Button);

  export default {
    name: "ClerkOrder",
    components: {
      ClerkFooter
    },
    data: function () {
      return {
        active: 2,
        allList: [
          {id:'001',nickname:'任秋兰以为佩',grade:'中级',sex:"0",age:'25',status:'待服务',time:'2小时',serverType:'文字三十分钟',fee:'5.00'},
          {id:'002',nickname:'任秋兰以为',grade:'高级',sex:"0",age:'27',status:'待服务',time:'1小时',serverType:'文字三十分钟',fee:'100.00'},
          {id:'003',nickname:'任秋兰以',grade:'中级',sex:"0",age:'29',status:'服务中',time:'30分钟',serverType:'文字三十分钟',fee:'100.00'},
          {id:'004',nickname:'任秋兰',grade:'特级',sex:"0",age:'24',status:'已取消',time:'2020-05-26 09:04',serverType:'文字三十分钟',fee:'100.00'},
          {id:'005',nickname:'任秋',grade:'中级',sex:"0",age:'22',status:'已完成',time:'2020-05-26 09:04',serverType:'文字三十分钟',fee:'100.00'},
          {id:'006',nickname:'任',grade:'高级',sex:"0",age:'23',status:'待服务',time:'1小时',serverType:'文字三十分钟',fee:'100.00'},
        ],
        waitList: [],
        goingList: [],
        finishedList: [],
        canceldList:[],
        loading: false,
        finished: false,
        emptyImg: emptyImg

      }
    },
    methods: {
      onLoad() {
        // 异步更新数据
        // setTimeout 仅做示例，真实场景中一般为 ajax 请求
        // setTimeout(() => {
        //   for (let i = 0; i < 6; i++) {
        //     this.allList.push(this.allList.length + 1);
        //   }
        //
        //   for (let i = 0; i < 10; i++) {
        //     this.waitList.push(this.waitList.length + 1);
        //   }
        //
        //   for (let i = 0; i < 10; i++) {
        //     this.goingList.push(this.goingList.length + 1);
        //   }
        //
        //   for (let i = 0; i < 10; i++) {
        //     this.finishedList.push(this.finishedList.length + 1);
        //   }
        //   // 加载状态结束
        //   this.loading = false;
        //   //
        //   // // 数据全部加载完成
        //   if (this.allList.length >= 6) {
        //     this.allList = true;
        //   }
        //   // if (this.waitList.length >= 40) {
        //   //   this.waitList = true;
        //   // }
        //   // if (this.goingList.length >= 40) {
        //   //   this.goingList = true;
        //   // }
        //   // if (this.finishedList.length >= 40) {
        //   //   this.finishedList = true;
        //   // }
        // }, 1000);
      },
    },
  }
</script>

<style scoped lang="stylus">
  @import '~style/mixins.styl'
  @import '~style/varibles.styl'
  .clerk-order
    margin-bottom 2rem
    .order-status
      .order-list
        .list-wrapper-box
          .list-wrapper
            margin-top .3rem
            padding .3rem
            background-color #fff
            between-align-items()
            flex-wrap wrap
            .list-left
              width 1.7rem
              position relative
              .serve-headImg
                width 1.7rem
                height 1.7rem
                border-radius .1rem
              .server-level
                position absolute
                bottom 0
                display inline-block
                text-align center
                font-size .1rem
                width .8rem
                border-radius .3rem
                background #000
                color: #fff
            .list-right
              width calc(100% - 1.9rem)
              padding-left .2rem
              .list-right-top
                between-align-items()
                .list-right-top-left
                  between-align-items()
                  .list-nickname
                    font-size .3rem
                    color #333
                  .list-grade-wrapper
                    padding 0 .1rem
                    .list-grade
                      background-color #F3F0FB
                      color #A4A7CA
                      border-radius .2rem
                      font-size .24rem
                      padding 0 .15rem
                  .list-sex-wrapper
                    padding 0 .1rem
                    .list-sex
                      background-color #F3F0FB
                      color #A4A7CA
                      border-radius .2rem
                      font-size .24rem
                      padding 0 .1rem
                .list-right-top-right
                  font-size .26rem
                  color $DefaultColor
              .list-right-bottom
                padding-top .36rem
                between-align-items()
                .list-right-bottom-left
                  .list-info
                    font-size .2rem
                    color #999
                    line-height .35rem
                .list-right-bottom-right
                  .order-cancel
                    background-color $DefaultColor
                    color #fff
                    font-size .26rem
                    border-radius .3rem
                    height .6rem
          .van-list__loading
            width 100%
</style>
<style>
  .clerk-order .list-right .van-button--normal{
    padding: 0 5px;
  }
  .clerk-order .van-tab--active{
    color:#979BC2
  }
  .clerk-order  .van-tabs__line{
    background-color: transparent;
  }
  .clerk-order .van-tabs__wrap--scrollable .van-tab{
    flex: unset;
    width: 20%;
  }
  .clerk-order .list-empty .van-empty .van-empty__image{
    width: 1.8rem;
    height: 1.24rem;
  }
  .clerk-order .list-empty .van-empty .van-empty__image> img{
    width: 100%;
    height: 100%;
  }
  .clerk-order  .server-level{
    right: 0;
  }
</style>
